<template>
    <div class="about-view">

        <div class="brands">
            <div class="w">
                <div class="b-left">
                    <h3>好书有伴APP</h3>
                    <p>好书有伴是社交化读书平台，提供社交化读书解决方案，为女性用户实用性学习赋能，为优质内容生产者增值</p>
                </div>
                <div class="b-right">  </div>

                <div class="top-banner">
                   <img src="../../assets/imgs/app-t.png" alt="">
                </div>
                 
            </div>
        </div>

        <Ani03></Ani03>

        <Ani01></Ani01>

        <Ani02></Ani02>


    </div>
</template>

<script setup>
    import Ani01 from './components/Ani01.vue'
    import Ani02 from './components/Ani02.vue'
    import Ani03 from './components/Ani03.vue'

</script>

<style lang="less" scoped>
.about-view {

    .brands {
        height: 550px;
        background: url('../../assets/imgs/about.png') no-repeat 50%;
        background-size: auto 100%;

        > div {
            position: relative;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .top-banner {
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                backdrop-filter: saturate(180%) blur(6px);
                background: hsla(0,0%,100%,.5);
                z-index: 2;
                img {
                    height: 126px;
                }
            }

            .b-left {
                flex: 0 0 550px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding-top: 120px;

                h3 {
                    font-size: 48px;
                    font-weight: 500;
                    line-height: 56px;
                }
                p {
                    width: 489px;
                    height: 64px;
                    font-size: 16px;
                    font-family: PingFang SC-Light,PingFang SC;
                    font-weight: 300;
                    color: #000;
                    line-height: 32px;
                    margin: 16px 0 48px;
                }

                span {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                    flex-direction: row;
                    width: 150px;
                    height: 48px;
                    background: #00c8c8;
                    border-radius: 80px;
                    font-size: 18px;
                    font-family: PingFang SC-Regular,PingFang SC;
                    font-weight: 400;
                    color: #fff;
                    cursor: pointer;
                    position: relative;
                    z-index: 10;
                }
            }

            .b-right {
                position: relative;
                flex: 0 0 550px;
                transform: translateY(-40px);
            }
        }
        
    }



}
</style>
